{include file="common/meta" /}
    <link href="/assets/home/css/MyCenter.css" rel="stylesheet" />
    <style>
        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }
        .userimg{
            border-radius:50px;
        }
    </style>
    <title>详情页</title>
    <div id="cover" style="height: 274px;">
        <!-- 课程封面 -->
        <img src="{$operation['thumbs_cdn']}" style="width:100%;display:block;height: 100%;object-fit:cover;" />

        <!-- 中间播放按钮 -->
        <div id="play" style="width:100%; height:70vw; text-align:center; line-height:80vw; position:absolute; top:0; ">
            <img style="width:20vw; height:20vw;" src="/assets/home/images/play.png" />
        </div>
    </div>

<!-- <video id="video" style="width:100%;display: none;" controls="controls"></video> -->
    <!-- ckplayer视频容器元素 -->
    <div id="video" style="width:100%;"></div>

    <div class="weui-panel weui-panel_access" style="margin-top:0;">
        <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_text">
                <h4 class="weui-media-box__title">{$operation['title']}<span style="float:right; margin-right:10px; color:#6d6d72; font-size:3vw;">
                <img id="likes" style="width:6vw; height:6vw;" src="" />
                <span id="zan">{$operation['likes_text']}</span></span></h4>
                <h4 class="weui-media-box__title" style="color: #ff0000; font-weight: 600;">￥{$operation['price']}元</h4>
                <p class="weui-media-box__desc">{$operation['content']}</p>
            </div>
        </div>
    </div>

     <!-- 课程列表 -->
     <div class="mui-content">
        <div class="title">课程列表</div>
        {if condition="$chapterlist"}
        <ul class="mui-table-view">
            {foreach $chapterlist as $key=>$item}
            <li data-listid="{$item['id']}" onclick="play(this)" class="mui-table-view-cell">{$key+1}、{$item['title']}
            </li>
            {/foreach}
        </ul>
        {else /}
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">该课程目前没有章节</li>
        </ul>
        {/if}

    </div>

    <div class="title">
        用户评论
    </div>
    <ul class="mui-table-view">
        {foreach $commentlist as $item}
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                {if $item['avatar']}
                    <img class="mui-media-object mui-pull-left userimg" src="{$item['avatar']}">
                    {else /}
                    <img class="mui-media-object mui-pull-left userimg" src="/assets/home/images/avatar.jpg">
                    {/if}

                <!-- <img class="mui-media-object mui-pull-left userimg" src="{$item['avatar']}"> -->
                <div class="mui-media-body">

                    {$item['mobile']}

                    <p class='mui-ellipsis'>{$item['content']} </p>
                </div>
            </a>
        </li>
        {/foreach}
    </ul>

    <!-- 弹出菜单 -->
    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action " style="padding-bottom: 10vh;">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a id="buy" href="javascript:void(0)">立即购买</a>
            </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#sheet1"><b>取消</b></a>
            </li>
        </ul>
    </div>
<!-- 加载ckplayer视频插件 -->
<script src="/assets/plugin/ckplayer/ckplayer.min.js"></script>
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/mui.indexedlist.js"></script>
    <script>
       

        $("#likes").click(function(){
            // 触发ajax异步请求
            $.ajax({
                url:`{:url('/home/user/subject/likes')}`,
                data:{
                     subid:`{$cid}`
                 },
                type:'post',
                dataType:'json',
                success: function (res){
                mui.toast(res.msg)
                setTimeout(function () {
                    location.reload()
                },2000)
            }
            })
        })
        
      //默认播放
      $("#play").on("click",function () {
        AsyncData()
    })

    // 播放
    function play(val) {
        // 课程ID
        var listid = $(val).data('listid');

        AsyncData(listid)
    }

    // 异步请求视频
    function AsyncData(listid) {
        $.ajax({
            type: "POST",
            url: `{:url('/home/user/subject/play')}`,
            data: {
                listid: listid,
                subid: `{$cid}`
            },
            dataType: "json",
            success: function (res) {
                // console.log(res)
                if (res.code) {
                    var url = res.data.url ? res.data.url : '';
                    //  console.log(url);

                    //没有播放地址
                    if (!url) {
                        mui.toast('暂无播放地址')
                        return false
                    }

                    $("#cover").css('display', 'none')

                    var videoObject = {
                        container: '#video', //视频容器的ID
                        variable: 'player', //播放函数名称
                        autoplay: true, //是否自动播放
                        webFull: false, //开启全屏
                        theatre: null, //剧场模式
                        controls: true, //控制栏
                        smallWindows: null, //是否启用小窗口模式
                        smallWindowsDrag: true, //小窗口开启时是否可以拖动
                        screenshot: true, //截图功能是否开启
                        timeScheduleAdjust: 5, //是否可调节播放进度
                        video: [ //视频地址列表形式
                            [url, 'video/mp4', '中文标清', 0],
                        ]
                    }
                    var player = new ckplayer(videoObject)

                } else {
                    if (res.data == 'buy') {
                        // 购买的提示菜单 
                        mui("#sheet1").popover('toggle')
                    } else {
                        //失败
                        mui.toast(res.msg)
                    }
                }
            }
        })
    }
        // 购买
        $("#buy").on("click", function () {
        //    console.log(111);
            //默认隐藏弹出框
            mui("#sheet1").popover('toggle')

            //    mui.confirm('是否确认购买','对话框',['购买','取消'], function(e){
                // if(e.index == 0)
                // {
                    $.ajax({
                        type: 'POST',
                        url: `{:url('/home/user/subject/buy')}`,
                        data: {
                            subid: `{$cid}`
                        },
                        dataType: 'json',
                        success: function (success) {
                            if(success.code)
                            {
                                //成功
                                mui.toast(success.msg)

                                setTimeout(function () {
                                location.href =
                                    `{:url('/home/user/subject/buycomplete',['cid' => $cid])}`
                                return false;
                            }, 2000)
                            }else{
                                //失败
                                mui.toast(success.msg)
                            }
                        }
                    })
                // }
            //    })
            })
    </script>
    
</body>
</html>